<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Comparative Case Identification Tool</title>
  <link rel="stylesheet" type="text/css" href=
   "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src=
   "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
  ></script>
  <script type="text/javascript" src=
   "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js">
  </script>
  <script type="text/javascript" src="jquery-svg-min.js"></script>
  <script type="text/javascript" src="papaparse-min.js"></script>
  <script type="text/javascript" src="numeric-1-2-6-min.js"></script>
  <script type="text/javascript" src="file-saver-min.js"></script>
  <script type="text/javascript" src="analyze.js"></script>
 </head>
 <body>
  <h1>Comparative Case Identification Tool</h1>
  <div id="main">
   <ul>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#plot">Plot</a></li>
    <li><a href="#table">Table</a></li>
   </ul>
   <div id="setup"> <!-- tab 1 -->
    <p>
     Upload a <span class="typed">csv</span> file to analyze.
     <input type="file" id="upload">
    </p>
    <table id="headers">
     <tr>
      <th></th>
      <th>Ignored</th>
      <th>Control</th>
      <th>Independent</th>
      <th>Dependent</th>
     </tr>
     <tr id="variables">
      <th id="rotate">Variables</th>
      <td><ul id="ignored"></ul></td>
      <td><ul id="control"></ul></td>
      <td><ul id="independent"></ul></td>
      <td><ul id="dependent"></ul></td>
     </tr>
    </table>
    <div id="explanation">
     <p>
      <select id="selectPlot">
       <option selected>No plot</option>
       <option>Plot control v independent</option>
       <option>Plot control v dependent</option>
       <option>Plot independent v dependent</option>
      </select>
     </p>
     <p>
      <select id="selectTable">
       <option selected>No table design</option>
       <option>Most Similar design</option>
       <option>Most Different design</option>
      </select>
     </p>
     <p>
      <label>
       <input type="checkbox" id="reorder">
       Reorder cases to minimize control variable distance
      </label>
     </p>
     <button>Download results</button>
     <p id="bigPcheck">
      <label>
       <input type="checkbox" id="bigdata">
       Use slower method for large number of cases
      </label>
     </p>
     <p><a href="readme.pdf">Further instructions</a></p>
    </div> <!-- #explanation -->
   </div> <!-- tab 1 div#setup -->
   <div id="plot"> <!-- tab 2 -->
    <div id="svgBox"><div id="svg"></div></div>
   </div>
   <div id="table"> <!-- tab 3 -->
    <div id="top" class="horiz"><table><thead></thead></table></div>
    <div id="left" class="vert"><table><thead></thead></table></div>
    <div id="right" class="vert horiz"><table></table></div>
   </div>
  </div>
 </body>
</html>
